window.onload = function () {
    function initCharts (data){
        $.ajax({
            type: "POST",
            url: "/analyze/mortgageCountTopTenData",
            data:data,
            success: function (msg){
                var myChart4 = echarts.init($('#myChart4').get(0));
                var allData,
                    quantity = [],
                    communityName = [];

                var max = data.max;
                var length;
                if(data.type == 1){
                    length = msg.result.mortgageCountList.length;
                    allData = msg.result.mortgageCountList;
                }else if(data.type == 2){
                    length = msg.result.areaList.length;
                    allData = msg.result.areaList;
                }

                if (max > length) {
                    toastr.warning('注意：小区数量不足！');
                }
                allData.forEach(function(data,index){
                    quantity[index] = data.value;
                    communityName[index] = data.communityName;
                });
                option4 = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    title: {
                        // subtext: '单位：个',
                        // textStyle: {
                        //     color: '#333'
                        // }
                    },
                    legend: {
                        data: communityName,
                        textStyle: {
                            color : "#ADADAD"
                        },
                    },
                    grid: {
                        //left: '0.5%',
                        top: '10%',
                        bottom: '25%',
                       // right:'0.5%',
                        //containLabel: true
                    },
                    yAxis:  {
                        type: 'value',
                        name: '单位：个',
                        axisLine:{
                            lineStyle:{
                                color:'#ADADAD',
                            }
                        },
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        axisLabel: {
                            interval: 0,
                            formatter:function(value)
                            {
                                return value.split("").join("\n");
                            }
                        },
                        data : communityName,
                        axisLine:{
                            lineStyle:{
                                color:'#ADADAD',
                            }
                        },
                    },
                    series: [
                        {
                            name:'押品数量',
                            type:'bar',
                            data:quantity,
                            itemStyle: {
                                normal: {
                                    color: 'rgba(98,203,49,0.7)',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{c}'
                                    }
                                }
                            }
                        }
                    ]
                };
                if(data.type == 1){
                    option4.yAxis.name = '单位(个)';
                    option4.series[0].name = "押品数量";
                }else if(data.type == 2){
                    option4.yAxis.name = '单位(平米)';
                    option4.series[0].name = "押品面积";
                }

                myChart4.setOption(option4);
                window.onresize = function () {
                    myChart4.resize()
                };
            }
        })};
    var dataMax = {
        max: 10,
        type: 1
    };
    initCharts(dataMax);
    $('#searchData').click(function(){
        var inputData,
            citys = $('#city').val(),
            districts = $('#district').val(),
            num = $("#numSelect").val();
            var type;
            if($("#one").hasClass("active")){
                type = 1;
            }else if($("#two").hasClass("active")){
                type = 2;
            }
            inputData = {
                city:citys,
                district:districts,
                max: num,
                type: type
            };

        initCharts(inputData)
    });
    $("#one").click(function(){
        var num = $("#numSelect").val(),
            citys = $('#city').val(),
            districts = $('#district').val();
        var dataMax = {
            city:citys,
            district:districts,
            max: num,
            type: 1
        };
        initCharts(dataMax);
    });
    $("#two").click(function(){
        var num = $("#numSelect").val(),
            citys = $('#city').val(),
            districts = $('#district').val();
        var dataMax = {
            city:citys,
            district:districts,
            max: num,
            type: 2
        };
        initCharts(dataMax);
    });
    $("#numSelect").change(function () {
        var num = $("#numSelect").val(),
            citys = $('#city').val(),
            districts = $('#district').val();
        var type;
        if($("#one").hasClass("active")){
            type = 1;
        }else if($("#two").hasClass("active")){
            type = 2;
        }
        var dataMax = {
            city:citys,
            district:districts,
            max: num,
            type: type
        };
        initCharts(dataMax);
    })
};